

import 'dart:ui';

import 'package:alip_app/StateManagement/ModelProvider.dart';
import 'package:alip_app/UI/Pages/CategoriesPage.dart';
import 'package:alip_app/UI/Pages/HomePage.dart';
import 'package:alip_app/UI/Pages/TopicsPage.dart';
import 'package:alip_app/UI/Pages/UserCenterPage.dart';
import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart' as StatusBarColor;


class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  TabController _controller;
  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      StatusBarColor.FlutterStatusbarcolor.setNavigationBarColor(Theme.of(context).scaffoldBackgroundColor);
      StatusBarColor.FlutterStatusbarcolor.setStatusBarColor(Colors.transparent);
    });
    _controller = TabController(length: 3, vsync: this);
    _controller.animation.addListener(_listenScroll);
    super.initState();
  }
  @override
  void dispose() {
    _controller.animation.removeListener(_listenScroll);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);

    Widget buildingWidget;
    buildingWidget = Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: AnimatedBuilder(
              animation: _controller.animation,
              builder: (context, child) {
                var value = _controller.animation.value - 1;
                if (value < 0) value = 0;
                return Container(
                  color: Color.lerp(Theme.of(context).scaffoldBackgroundColor, Theme.of(context).primaryColor, value),
                );
              },
            ),
          ),
          Positioned.fill(
            child: TabBarView(
              controller: _controller,
              children: [
                HomePage(),
                CategoriesPage(),
                UserCenterPage(),
              ],
            )
          ),
          _buildPageHeader(),
          _buildPageNavigation()
        ],
      ),
    );
    buildingWidget = Directionality(
      textDirection: TextDirection.rtl,
      child: buildingWidget,
    );
    buildingWidget = ModelProvider<MainPageModel>(
      child: buildingWidget,
      model: MainPageModel(
        switchPage: (pageIndex) => this._controller.animateTo(pageIndex),
      ),
    );
    return buildingWidget;
  }

  void _listenScroll() {

  }

  Widget _buildPageNavigation() {
    return Positioned(
      left: 10.0,
      right: 10.0,
      bottom: 10.0,
      height: 60.0,
      child: AnimatedBuilder(
        animation: this._controller.animation,
        builder: (context, child) {
          var value = this._controller.animation.value - 1;
          if (value < 0) value = 0;
          final height = 10 + 60 + 10.0;
          return Transform.translate(
            offset: Offset(0.0, (height * value)),
            child: child,
          );
        },
        child: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15.0),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaY: 20.0, sigmaX: 20.0),
              child: Container(
                color: Theme.of(context).backgroundColor,
                constraints: BoxConstraints(
                  maxWidth: 350.0
                ),
                child: TabBar(
                  controller: _controller,
                  labelColor: Theme.of(context).primaryColor,
                  unselectedLabelColor: Theme.of(context).textTheme.bodyText2.color.withOpacity(0.3),
                  tabs: [
                    _buildTabItem(text: "باش بەت", icon: CupertinoIcons.home),
                    _buildTabItem(text: "تۈرلەر", icon: CupertinoIcons.tags,),
                    _buildTabItem(text: "مېنىڭ", icon: CupertinoIcons.person,),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildTabItem({String text, IconData icon}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(icon, size: 28,),
        Text(text, style: TextStyle(fontSize: 11.0),)
      ],
    );
  }

  Widget _buildPageHeader() {
    final titleBarHeight = MediaQuery.of(context).padding.top + 60;
    return Positioned(
      top: 0.0,
      left: 0.0,
      right: 0.0,
      height: titleBarHeight,
      child: AnimatedBuilder(
        animation: _controller.animation,
        builder: (context, child) {
          final value = _controller.animation.value - 1;
          final offset = Offset(0.0, value < 0 ? 0 : -(value * titleBarHeight));
          return Transform.translate(
            offset: offset,
            child: child,
          );
        },
        child: ClipRRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
            child: Container(
              color: Theme.of(context).backgroundColor,
              padding: EdgeInsets.only(bottom: 10.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Spacer(),
                  _buildHeaderIcon(CupertinoIcons.add),
                  SizedBox(width: 10.0,),
                  Container(
                    constraints: BoxConstraints(
                      maxWidth: 230.0,
                      maxHeight: 35.0
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                        enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide(color: Theme.of(context).scaffoldBackgroundColor)),
                        focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide(color: Theme.of(context).scaffoldBackgroundColor)),
                        filled: true,
                        fillColor: Theme.of(context).scaffoldBackgroundColor,
                        prefixIcon: Icon(CupertinoIcons.search, color: Theme.of(context).textTheme.bodyText2.color.withOpacity(0.3),),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                  SizedBox(width: 10.0,),
                  InkWell(
                    onTap: (){
                      _controller.animateTo(2);
                    },
                    child: _buildHeaderIcon(CupertinoIcons.person),
                  ),
                  Spacer(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
  Widget _buildHeaderIcon(IconData icon) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: CircleAvatar(
        radius: 35.0 / 2,
        backgroundColor: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.7),
        child: Icon(icon, size: 26.0, color: Theme.of(context).textTheme.bodyText2.color.withOpacity(0.5),),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}


class MainPageModel extends Model {
  final void Function(int pageIndex) switchPage;
  MainPageModel({this.switchPage});
}

